import React from 'react';
import { observer } from 'mobx-react';
import { Row, Col, message, Modal } from 'antd';
import { WeaLocaleProvider, WeaSelect, WeaNewScroll, WeaTextarea, WeaHelpfulTip, WeaError, WeaInput } from 'ecCom';
import $ from "jquery";
import _ from "lodash";
const getLabel = WeaLocaleProvider.getLabel;
const formatMultiLang = WeaLocaleProvider.formatMultiLang;

@observer
export default class ConditionSet extends React.Component {
    componentWillMount() {
        const { store } = this.props;
        store.changeContentHeight();
    }


    render() {
        const { store } = this.props;
        const dialogHeight = 616;
        const { conditionInfo, fieldRecord, relationtypeOptions, relation, root, ruleSql, isShowSql, contentHeight, targetValue, valuetype, targetValueOptions, selectedItemKey, tableOptions } = store;
        const { conditiontype, conditionsql2, fieldOptions } = conditionInfo;
        let targetFieldid = "";
        if (fieldRecord && fieldRecord.key) {
            targetFieldid = fieldRecord.key + "";
        }
        const conditiontypeOptions = [{
            key: "1",
            showname: getLabel('508498','普通类型')
        }, {
            key: "2",
            showname: 'sql'
        }];

        const valuetypeOptions = [{
            key: "1",
            showname: getLabel('507869', '普通变量')
        }, {
            key: "2",
            showname: getLabel('507870', '关联表格')
        }];
        const { key } = fieldRecord;
        let sql = getLabel('508499','暂无');
        if (ruleSql != "") {
            sql = ruleSql;
        }
        return (
            <div className="wev-edc-condition-warp">
                <div className="wev-edc-condition-top" >
                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@kjcmnt`}>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@oztcpw`} span={6} style={{ width: 170 }}>
                            <div className="wev-edc-field-label" title={getLabel('508481','条件类型')}>
                                {getLabel('508481','条件类型')}
                            </div>
                            <div className="wev-edc-field">
                                <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@klbsph`}
                                    key={conditiontype}
                                    value={conditiontype}
                                    options={conditiontypeOptions}
                                    style={{ width: 100 }}
                                    viewAttr={3}
                                    onChange={(v) => store.changeFieldValue('conditiontype', v)}
                                />
                            </div>
                        </Col>
                        {conditiontype && conditiontype == "1" &&
                            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@3tmi4n`} span={6} style={{ width: 225 }}>
                                <div className="wev-edc-field-label" title={getLabel('508482','目标字段')}>
                                    {getLabel('508482','目标字段')}
                                </div>
                                <div className="wev-edc-field" style={{ width: 165 }}>
                                    <WeaError ecId={`${this && this.props && this.props.ecId || ''}_WeaError@8f03px`} tipPosition='bottom' error={getLabel('513498','目标字段未填写')}
                                        style={{ width: "100%" }}
                                        ref={ref => { store.refObj["mbzd"] = ref; }}
                                    >
                                        <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@cac80w`}
                                            optionFilterProp="children"
                                            showSearch
                                            filterOption={(inputValue, option) => store.selectFilterOption(inputValue, option)}
                                            options={fieldOptions.slice()}
                                            style={{ width: 160 }}
                                            value={targetFieldid}
                                            viewAttr={3}
                                            onChange={(v) => store.changeFieldValue('targetFieldid', v)}
                                        />
                                    </WeaError>
                                </div>
                            </Col>
                        }
                        {conditiontype && conditiontype == "1" &&
                            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@2i792e`} span={6} style={{ width: 100 }}>
                                {key &&
                                    <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@vpto2x`}
                                        key={relationtypeOptions.length}
                                        value={relation}
                                        options={relationtypeOptions.slice()}
                                        style={{ width: 95 }}
                                        viewAttr={2}
                                        onChange={(v) => store.changeFieldValue('relation', v)}
                                    />
                                }
                            </Col>
                        }
                        {conditiontype && conditiontype == "1" &&
                            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@dt33mz`} span={6} style={{ width: 110 }}>
                                {key && <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@fy42lu`}
                                    value={valuetype}
                                    options={valuetypeOptions}
                                    style={{ width: 105 }}
                                    viewAttr={3}
                                    onChange={(v) => store.changeFieldValue('valuetype', v)}
                                />
                                }
                            </Col>
                        }
                        {conditiontype && conditiontype == "1" && valuetype === "1" &&
                            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@vbfe21`} span={6} style={{ width: 185 }}>
                                {key &&
                                    <WeaError ecId={`${this && this.props && this.props.ecId || ''}_WeaError@oyesac`} tipPosition='bottom' error={getLabel('513498','目标字段未填写')}
                                        style={{ width: 185 }}
                                        ref={ref => { store.refObj["mbzd_"] = ref; }}
                                    >
                                        <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@0k749d`} value={targetValue} viewAttr={3} onChange={value => { store.changeFieldValue("targetFieldid_", value) }} style={{ width: 185 }} />
                                    </WeaError>
                                }
                            </Col>
                        }
                        {conditiontype && conditiontype == "1" && valuetype === "1" &&
                            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@1jz92z`} span={6} style={{ width: 16, marginLeft: '20px', verticalAlign: 'top', display: 'inline-block', lineHeight: '33px' }}>
                                {key &&
                                    <WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@ndvegu`} width={300} title={
                                        <div >
                                            <p>{getLabel('508508', '提示：配置变量可输入动态参数为：')}</p>
                                            <p>{getLabel('508509', '1.输入$taskid$表示当前任务')}</p>
                                            <p>{getLabel('508510', '2.输入$nodeid$表示当前任务节点')}</p>
                                            <p>{getLabel('508511', '3.输入$userid$表示当前操作者')}</p>
                                            <p>{getLabel('508512', '4.输入$departmentid$表示当前操作者部门')}</p>
                                            <p>{getLabel('508513', '5.输入$subcompanyid$表示当前操作者分部')}</p>
                                            <p>{getLabel('508514', '6.输入$workcode$表示当前操作者工号')}</p>
                                        </div>} />
                                }
                            </Col>
                        }
                        {conditiontype && conditiontype == "1" && valuetype === "2" &&
                            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@r156sn`} span={6} style={{ width: 185 }}>
                                {key &&
                                    <WeaError ecId={`${this && this.props && this.props.ecId || ''}_WeaError@516r8i`} tipPosition='bottom' error={getLabel('513498','目标字段未填写')}
                                        style={{ width: 185 }}
                                        ref={ref => { store.refObj["mbzd_"] = ref; }}
                                    >
                                        <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@2ww0h9`}
                                            optionFilterProp="children"
                                            showSearch
                                            value={targetValue}
                                            options={targetValueOptions.slice()}
                                            style={{ width: 185 }}
                                            viewAttr={3}
                                            onChange={(v) => store.changeFieldValue('targetValue', v)}
                                        />
                                    </WeaError>
                                }
                            </Col>
                        }
                    </Row>
                </div>
                {conditiontype && conditiontype == "1" &&
                    <div>
                        <div className="wev-edc-condition-button">
                            <div className="btns">
                                <div onClick={() => store.addParam(this)} title={getLabel('502698','添加')} className="btn-icon add"></div>
                                <div onClick={() => { store.delParam() }} title={getLabel('502286', '删除')} className="btn-icon del"></div>
                                <div onClick={() => store.addbracket(0)} title={getLabel('508505','添加或条件')} className="btn-icon joinor"></div>
                                <div onClick={() => store.addbracket(1)} title={getLabel('508506','添加与条件')} className="btn-icon joinand"></div>
                                <div onClick={() => { store.splitCondition() }} title={getLabel('508496','拆分条件')} className="btn-icon spit"></div>
                            </div>
                        </div>
                        <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@6c716z`} ref="contentScroll" height={250} >
                            <div className="wev-edc-condition-content">
                                <div id="ruleContent"  >
                                    <div id="expressionBlock">
                                        {store.getRelationItems(root, true)}
                                    </div>
                                </div>
                            </div>
                        </WeaNewScroll>
                        <div id="ruleSQL" className={isShowSql ? "" : "hide"}>
                            <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@dqrykc`} height={60} >
                                {sql}
                            </WeaNewScroll>
                        </div>
                        <div id="ruledescBtn" onClick={() => store.changeShowSql()} className={"operbtn " + (isShowSql ? "operbtn_down" : "operbtn_up")}></div>
                    </div>
                }
                {conditiontype && conditiontype == "2" &&
                    <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@1uf620`} key={sql.length} height={250} >
                        <div className="wev-edc-condition-sql">
                            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@9ydkis`}>

                                <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@bww33e`} span={20}>
                                    <div className="sqlArea">
                                        <WeaError ecId={`${this && this.props && this.props.ecId || ''}_WeaError@w5mspq`} tipPosition='bottom' error={"sql" + '"' + getLabel('508517','未填写')}
                                            style={{ width: "100%" }}
                                            ref={ref => { store.refObj["sql_"] = ref; }}
                                        >
                                            <WeaTextarea ecId={`${this && this.props && this.props.ecId || ''}_WeaTextarea@r2a9bv`}
                                                minRows={10}
                                                value={conditionsql2}
                                                viewAttr={3}
                                                onChange={(v) => store.changeFieldValue('conditionsql2', v)}
                                            />
                                        </WeaError>
                                    </div>
                                    <div className="sqlDesc">
                                        {getLabel("508316", "格式为：$table1$.a='1' and $table2$.b='$Sheet1.zt$' and $table3$.c='$Sheet1.detail_1.mc$'，其中table1,table2,table3为数据库表名，a,b,c为字段名，Sheet1.zt为主表字段，Sheet1.detail_1.mc为明细表字段（Sheet1为表单所在sheet的名称）。")}
                                        <br />
                                        {getLabel('507872', '数据源中表为：') + tableOptions.join(",")}
                                        <div style={{ width: 215, marginLeft: '18px', verticalAlign: 'top', display: 'inline-block', lineHeight: '22px' }}>
                                            <WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@qxss04`} width={300} title={
                                                <div >
                                                    <p>{getLabel('508508', '提示：配置变量可输入动态参数为：')}</p>
                                                    <p>{getLabel('508509', '1.输入$taskid$表示当前任务')}</p>
                                                    <p>{getLabel('508510', '2.输入$nodeid$表示当前任务节点')}</p>
                                                    <p>{getLabel('508511', '3.输入$userid$表示当前操作者')}</p>
                                                    <p>{getLabel('508512', '4.输入$departmentid$表示当前操作者部门')}</p>
                                                    <p>{getLabel('508513', '5.输入$subcompanyid$表示当前操作者分部')}</p>
                                                    <p>{getLabel('508514', '6.输入$workcode$表示当前操作者工号')}</p>
                                                </div>} />
                                        </div>
                                    </div>
                                </Col>
                            </Row>

                        </div>
                    </WeaNewScroll>
                }
            </div>
        )
    }
}

